<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="onenews">
			<navigator :url="'/home/station/stationpage?id='+detail.client_uid" hover-class="none">
				<image :src="detail.avatar" mode="aspectFill" class="imghead"></image>
			</navigator>
			<view class="newsinfo">
				<navigator :url="'/home/station/stationpage?id='+detail.client_uid" hover-class="none" class="namedes">
					<text>{{detail.name}}</text>
					<image :src="detail.mimage" v-if="detail.mimage" mode="heightFix"></image>
					<view class="xinyong_box">
						<view class="xin">信</view>
						<view class="xin_number">{{detail.credit_value}}</view>
						<view class="shiming" v-if="detail.realname">实</view>
						<view class="qiye" v-if="detail.enterprise">企</view>
					</view>
				</navigator>
				<view class="times">
					<text>{{detail.createtime}}</text>
				</view>
				<view class="times">
					<text class="add clamp1">{{detail.city}}</text>
				</view>
			</view>
			<view class="del" v-if="role==1" @click="deleteHeadline">删除</view>
			<view @click="attention" :class="detail.is_follow==1?'attention opt':'attention'" v-if="role==0">
				{{detail.is_follow==1?'已关注':'+ 关注'}}
			</view>
		</view>
		<video v-if="detail.type==2" :src="detail.video[0]" controls class="videos"></video>
		<view class="swiper_index" v-if="detail.type==1">
			<u-swiper :list="detail.images" @click="showbanner" :autoplay="false" mode="dot" :effect3d="false"
				height="566" interval="5000" border-radius="0" bg-color="transparent"></u-swiper>
		</view>
		<view class="contents" v-if="detail.content">{{detail.content}}</view>
		<view class="contactshops" v-if="detail.recd_goods.length>0">
			<text class="title">关联供应商品</text>
			<view class="tree_One" v-for="(item,index) in detail.recd_goods" :key="index" @click="godetail(item.id)">
				<image :src="item.image" mode="aspectFill" class="hots_oneBack"></image>
				<view class="tree_oneright">
					<view class="clamp1 hot_name">{{item.title}}</view>
					<view class="hot_info">
						<view class="hot_price"><text>￥</text>{{item.money}}<text>/{{item.unit}}</text></view>
						<text class="hot_looks">{{item.view}}人查看</text>
					</view>
					<!-- <view class="hot_citys">产品规格产品规格</view> -->
				</view>
			</view>
		</view>
		<view class="totals">
			<text class="from20">{{detail.view}}人浏览</text>
			<text class="fromleft">{{detail.dz_num}}人点赞</text>
			<text class="fromleft">{{detail.pl_num}}个评论</text>
		</view>
		<view class="cometbox">
			<block v-for="(item,index) in list" :key="index">
				<view class="cometone">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="cometinfo">
						<text class="name">{{item.nickname}}</text>
						<text class="comets" @click="reply(index)">{{item.content}}</text>
						<text class="time">{{item.createtime}}</text>

						<block v-for="(item2,index2) in item.list" :key="index2">
							<text class="answers">{{item2.nickname}}回复:</text>
							<view style="padding: 10rpx 0;" @click="usercomment(item2)">{{item2.content}}</view>
							<text class="time">{{item2.createtime}}</text>

							<block v-for="(item3,index3) in item2.list" :key="index3">
								<text class="answers">{{item3.nickname}}回复: {{item2.nickname}}</text>
								<view class="old_p ">@{{item2.nickname}}: {{item3.content}}</view>
								<text class="time">{{item3.createtime}}</text>
							</block>
						</block>
					</view>
				</view>
			</block>
			<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
		</view>


		<view class="bottoms">
			<u-input v-model="contents" type="text" :border="false" placeholder="喜欢就评论支持一下吧" confirm-type="send"
				placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false"
				@confirm="evaluate" @focus="onfocus" @blur="onblur" v-if="!showreply" />

			<u-input v-model="contents" type="text" :border="false" :placeholder="replyusername" confirm-type="send"
				placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false"
				@confirm="revert" @focus="onfocus" @blur="onblur" v-if="showreply" />

			<view class="eachbox" @click="evaluate" v-if="showsend&&!showreply">
				<text class="tit">发送</text>
			</view>
			<view class="eachbox" @click="revert" v-if="showsend&&showreply">
				<text class="tit">发送1</text>
			</view>

			<view class="eachbox" :class="detail.is_dz==1?'opt':''" @click="praise" v-if="!showsend">
				<text class="iconfont icon-good_active-copy"></text>
				<text class="tit">点赞</text>
			</view>
			<label class="eachbox" @click="sharegood">
				<text class="iconfont icon-fenxiang2"></text>
				<text class="tit">分享</text>
			</label>
			<!-- <button open-type="share" class="eachbox">
				<text class="iconfont icon-fenxiang2"></text>
				<text class="tit">分享</text>
			</button> -->
		</view>
		<!-- <view class="bottoms" v-if="role==1&&showreply">
			<u-input v-model="contents" type="text" :border="false" :trim="true" confirm-type="send"
				@blur="showreply=false" @confirm="revert" :focus="true" :placeholder="replyusername"
				placeholderStyle="color:#B9B9B9" :auto-height="false" class="lineputs" :clearable="false" />
		</view> -->
	</view>
</template>

<script>
	var _this, $paginator;
	export default {
		data() {
			return {
				settingdata: {
					name: '头条详情',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "newsdetail"
				},
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				detail: {
					recd_goods: {}
				},
				// 进入详情的角色身份 0观看别人的， 1自己的文章
				role: 0,
				senduid: '',

				//博主展开回复按钮
				showreply: false,
				//博主回复的楼层
				floor: 0,
				// 博主回复的人名
				replyusername: "请输入评语",
				// 回复语言
				contents: "",
				id: "",
				showsend: false,

				howceng: '', //当前点击的是第几层
				cengid: '', //楼层数的id
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			_this.senduid = options.senduid
			_this.curindex = options.curindex
			console.log(options)
			if (uni.getStorageSync("client_uid")) {
				_this.role = (options.senduid == uni.getStorageSync("client_uid")) ? 1 : 0
			}
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onShow() {
			// 登录完成后刷新本页面
			if (uni.getStorageSync("refresh") == 1 || !uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", "2")

				if (uni.getStorageSync("client_uid")) {
					_this.role = (_this.senduid == uni.getStorageSync("client_uid")) ? 1 : 0
				}

				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			}
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				$paginator.getData("communitydetail", {
					uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : 0,
					id: _this.id
				}, (data) => {
					$paginator.pageCount = data.pl_list.total_page
					if (firstLoad) {
						_this.list = data.pl_list.comment ? data.pl_list.comment : []
					} else {
						_this.list = _this.list.concat(data.pl_list.comment)
					}
					_this.detail = data
					_this.nomore = data.nomore
				})
			},
			// banner点击放大
			showbanner(index) {
				_this.$plug.showImg(_this.detail.images, _this.detail.images[index])
			},
			// 跳转到商品详情
			godetail(id) {
				uni.navigateTo({
					url: "/home/index/supplydetail?id=" + id
				})
			},
			// 博主点击回复
			reply(index) {
				console.log(index, _this.list[index])
				// if (_this.role == 1) {
				_this.floor = index
				_this.replyusername = "回复：" + _this.list[index].nickname
				_this.showreply = true
				_this.howceng = 1
				// }
			},
			usercomment(item) {
				console.log(item)
				_this.showreply = true
				_this.replyusername = "1回复：" + item.nickname
				_this.cengid = item.id
				_this.howceng = 2
			},
			//提交回复按钮
			revert() {
				console.log('提交回复按钮')
				let type_id
				if (_this.howceng == 1) {
					type_id = _this.list[_this.floor].id
				} else {
					type_id = _this.cengid
				}
				_this.$api.post("savecomment", {
					select_type: 4,
					other_type: 2,
					contents: _this.contents,
					type_id: type_id
				}).then(data => {
					uni.showToast({
						title: "回复成功",
						icon: "none",
						duration: 500
					})
					// _this.list[_this.floor].list.push({
					// 	content: _this.contents,
					// 	createtime: "刚刚"
					// })
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)

					_this.showreply = false
					_this.contents = ""
				});
			},
			// 删除头条
			deleteHeadline() {
				uni.showModal({
					title: '提示',
					content: '删除后所有评论都会被删除',
					success: function(res) {
						if (res.confirm) {
							_this.$api.get("delcontent", {
								id: _this.id,
								client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync(
									"client_uid") : 0
							}).then(data => {
								_this.$plug.isonshow(2)
								wx.navigateBack({
									delta: 1
								})
							});
						}
					}
				});
			},
			// 关注
			attention() {
				_this.$api.islogin(() => {
					_this.$api.get("savefollow", {
						select_type: 2,
						id: _this.detail.client_uid
					}).then(data => {
						console.log(data)
						_this.detail.is_follow = _this.detail.is_follow == 0 ? 1 : 0

						let Pages = getCurrentPages();
						let prevPage = Pages[Pages.length - 2]
						console.log(prevPage);
						prevPage.$vm.is_follow = _this.detail.is_follow;
						prevPage.$vm.senduid = _this.detail.client_uid;
					});
				})
			},
			// 点赞
			praise() {
				_this.$api.islogin(() => {
					_this.$api.get("savefabulous", {
						select_type: 1,
						id: _this.detail.id
					}).then(data => {
						_this.detail.is_dz = _this.detail.is_dz == 0 ? 1 : 0
						_this.detail.dz_num = _this.detail.is_dz == 0 ? _this.detail.dz_num -= 1 : _this
							.detail.dz_num += 1

						console.log(_this.detail.is_dz, _this.detail.dz_num);
						uni.$emit('updateData', {
							guanzhu: _this.detail.is_dz,
							curindex: _this.curindex
						})

						// _this.$plug.setdata(1, {
						// 	guanzhu: 1
						// })
					});
				})
			},
			// 普通用户评价
			evaluate() {
				if (_this.contents.length < 1) {
					uni.showToast({
						title: "评论不能为空",
						icon: "none",
					})
					return false
				}

				_this.$api.post("savecomment", {
					select_type: 4,
					other_type: 1,
					contents: _this.contents,
					type_id: _this.id
				}).then(data => {
					// uni.showToast({
					// 	title: "评价内容已提交审核",
					// 	icon: "none",
					// 	duration: 500
					// })
					_this.contents = ""
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				});
			},
			onfocus() {
				_this.showsend = true
			},
			// 分享
			sharegood() {
				console.log(111111)
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession", //分享到聊天界面
					type: 5,
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
					title: '祥运园林app分享',
					miniProgram: {
						id: 'gh_57154cd1b0ae', //微信小程序原始id
						path: "/home/station/newsdetail?id=" + _this.id + '&senduid=' + _this.senduid, //点击链接进入的页面
						type: 2, //微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						webUrl: '/pages/index/index' //兼容低版本的网页链接 /static/tiaozhuan.html
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			},
			onblur() {
				_this.showsend = false
				_this.showreply = false
				_this.howceng = ''
				_this.cengid = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.onenews {
		display: flex;
		flex-direction: row;
		border-top: 15rpx solid #f3f3f3;
		padding: 30rpx 26rpx;
		align-items: center;

		.imghead {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
		}

		.newsinfo {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin-left: 30rpx;
			margin-right: 20rpx;

			.namedes {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				flex: 1;
				margin-right: 10rpx;

				text {
					color: #333333;
					font-size: 32rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: 230rpx;
				}

				image {
					max-width: 120rpx;
					height: 36rpx;
					margin-left: 12rpx;
				}

				.xinyong_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 8rpx;

					.xin {
						width: 30rpx;
						height: 30rpx;
						background: #00C575;
						border-radius: 3px 0 0 3rpx;
						text-align: center;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
					}

					.xin_number {
						background-color: #fff;
						border: 2rpx solid #00C575;
						border-radius: 0 3rpx 3rpx 0;
						color: #00C575;
						font-size: 20rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						width: 50rpx;
						text-align: center;
					}
				}
			}

			.times {
				margin-top: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					color: #666666;
					font-size: 24rpx;
					flex: 1;
				}

				.add {
					max-width: 300rpx;
				}
			}
		}

		.attention {
			width: 107rpx;
			height: 50rpx;
			background: #38be8c;
			border-radius: 25rpx;
			text-align: center;
			line-height: 48rpx;
			border: 1rpx solid #38be8c;
			font-size: 26rpx;
			color: #FFFFFF;
		}

		.attention.opt {
			color: #38be8c;
			background-color: #FFFFFF;
		}

		.del {
			width: 107rpx;
			height: 50rpx;
			border: 2rpx solid #fd7602;
			border-radius: 26rpx;
			text-align: center;
			line-height: 48rpx;
			color: #fd7602;
			font-size: 26rpx;
		}
	}

	.videos {
		width: 100%;
		height: 562rpx;
	}

	.swiper_index {
		height: 556rpx;
	}

	.contents {
		margin: 0 36rpx;
		padding: 37rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
		color: #333333;
		font-size: 28rpx;
	}

	.contactshops {
		padding: 35rpx 0;
		margin: 0 36rpx;
		display: flex;
		flex-direction: column;

		.title {
			color: #999999;
			font-size: 26rpx;
		}

		.tree_One {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;

			.hots_oneBack {
				width: 190rpx;
				height: 190rpx;
				border-radius: 5rpx;
			}

			.tree_oneright {
				display: flex;
				flex-direction: column;
				margin-left: 23rpx;
				flex: 1;

				.hot_name {
					font-size: 28rpx;
					color: #222222;
					margin: 14rpx 7rpx 0 7rpx;
				}

				.hot_info {
					margin-top: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.hot_price {
						font-size: 30rpx;
						color: #F73F3F;
						font-weight: bold;
						display: flex;
						flex-direction: row;
						align-items: flex-end;

						text {
							font-weight: normal;
							font-size: 24rpx;
						}
					}

					.hot_looks {
						font-size: 22rpx;
						color: #999999;
						margin-left: 22rpx;
					}
				}

				.hot_citys {
					margin-top: 18rpx;
					margin-left: 11rpx;
					color: #999999;
					font-size: 22rpx;
				}
			}
		}
	}

	.totals {
		border-top: 8rpx solid #f8f8f8;
		padding: 37rpx 0;
		margin: 0 36rpx;
		display: flex;
		flex-direction: row;
		border-bottom: 2rpx solid #f8f8f8;
		font-size: 24rpx;

		text {
			color: #666666;
		}

		.from20 {
			margin-left: 20rpx;
		}

		.fromleft {
			margin-left: 60rpx;
		}
	}

	.cometbox {
		margin: 0 36rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 130rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 130rpx);

		.cometone {
			display: flex;
			flex-direction: row;
			padding: 33rpx 0;

			image {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			.cometinfo {
				margin-left: 9rpx;
				display: flex;
				flex-direction: column;
				flex: 1;

				.name {
					color: #999999;
					font-size: 28rpx;
				}

				.comets {
					margin-top: 16rpx;
					color: #222222;
					font-size: 28rpx;
				}

				.time {
					margin-top: 18rpx;
					color: #999999;
					font-size: 22rpx;
				}

				.answers {
					margin-top: 34rpx;
					color: #999999;
					font-size: 28rpx;
				}

				.old_p {
					background: #F3F3F3;
					border-radius: 8rpx;
					padding: 10rpx 16rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: #999999;
				}
			}
		}

		.nomore {
			font-size: 24rpx;
		}
	}

	.bottoms {
		height: 129rpx;
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -4rpx 16rpx 0 rgba(184, 178, 178, 0.25);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 25rpx;

		.lineputs {
			flex: 1;
			padding: 0 30rpx;
			background-color: #F7F7F7;
			border-radius: 30rpx;
		}

		.eachbox {
			display: flex;
			flex-direction: column;
			margin-left: 50rpx;
			align-items: center;
			padding: 0;
			line-height: 32rpx;
			background-color: #FFFFFF;

			&::after {
				border: none
			}

			.iconfont {
				font-size: 36rpx;
				color: #a6a6a6;
			}

			.tit {
				margin-top: 14rpx;
				color: #666666;
				font-size: 24rpx;
			}
		}

		.eachbox.opt {

			.iconfont,
			.tit {
				color: #FE524B;
			}
		}
	}
</style>
